<template>
    <div class="container">
        <van-sticky>
            <van-nav-bar title="影片详情" left-arrow @click-left="$router.back()" />
        </van-sticky>

        <!-- 即将上映 -->
        <div class="content" v-if="cartlist.length">
            <!-- 海报图 -->
            <div class="image">
                <img :src="cartlist[0].poster" style="width: 100%; height: 100%;" alt="">
            </div>

            <!-- 卡片信息 -->
            <div class="list-content">
                <van-card>
                    <!-- 标题 + 标签 -->
                    <template #title>
                        <div class="title-line">
                            <span class="film-name">{{ cartlist[0].name }}</span>
                            <van-tag plain type="primary">{{ cartlist[0].filmType }}</van-tag>
                        </div>
                    </template>

                    <!-- 描述 -->
                    <template #desc>
                        <div class="list-com">
                            <div>{{ cartlist[0].category }}</div>
                            <div>{{ cartlist[0].nation }}&emsp;|&emsp;{{ cartlist[0].runtime }}</div>
                        </div>
                    </template>

                    <!-- 简介折叠面板 -->
                    <template #footer>
                        <van-collapse v-model="activeName" accordion>
                            <van-collapse-item title="简介">
                                {{ cartlist[0].synopsis }}
                            </van-collapse-item>
                        </van-collapse>
                    </template>
                </van-card>
            </div>
            <div class="person">
                <p>演职人员</p>
                <div class="grid-wrapper">
                    <van-grid class="person-grid" :gutter="8">
                        <van-grid-item v-for="(actor, idx) in parseActors(cartlist[0].actors)" :key="idx">
                            <van-image slot="icon" :src="actor.avatarAddress" round fit="cover" width="60"
                                height="60" />
                            <span slot="text">{{ actor.name }}</span>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
            <div class="lunbo">
                <p>剧照</p>
                <div class="photo-list">
                    <div class="photo-list">
                        <van-image v-for="(url, idx) in parsePhotos(cartlist[0].photos)" :key="idx" :src="url"
                            width="150" height="60" fit="cover" />
                    </div>
                </div>
            </div>

        </div>

        <!-- 正在热映 -->
        <div class="content" v-if="oldlist.length">
            <!-- 海报图 -->
            <div class="image">
                <img :src="oldlist[0].poster" style="width: 100%; height: 100%;" alt="">
            </div>

            <!-- 卡片信息 -->
            <div class="list-content">
                <van-card>
                    <!-- 标题 + 标签 -->
                    <template #title>
                        <div class="title-line">
                            <span class="film-name">{{ oldlist[0].name }}</span>
                            <van-tag plain type="primary">{{ oldlist[0].filmType }}</van-tag>
                        </div>
                    </template>

                    <!-- 描述 -->
                    <template #desc>
                        <div class="list-com">
                            <div>{{ oldlist[0].category }}</div>
                            <div>{{ oldlist[0].nation }}&emsp;|&emsp;{{ oldlist[0].runtime }}</div>
                        </div>
                    </template>

                    <!-- 简介折叠面板 -->
                    <template #footer>
                        <van-collapse v-model="activeName" accordion>
                            <van-collapse-item title="简介">
                                {{ oldlist[0].synopsis }}
                            </van-collapse-item>
                        </van-collapse>
                    </template>
                </van-card>
            </div>
            <div class="person">
                <p>演职人员</p>
                <div class="grid-wrapper">
                    <van-grid class="person-grid" :gutter="8">
                        <van-grid-item v-for="(actor, idx) in parseActors(oldlist[0].actors)" :key="idx">
                            <van-image slot="icon" :src="actor.avatarAddress" round fit="cover" width="60"
                                height="60" />
                            <span slot="text">{{ actor.name }}</span>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
            <div class="lunbo">
                <p>剧照</p>
                <div class="photo-list">
                    <div class="photo-list">
                        <van-image v-for="(url, idx) in parsePhotos(oldlist[0].photos)" :key="idx" :src="url"
                            width="150" height="60" fit="cover" />
                    </div>
                </div>
            </div>

        </div>
    </div>
    <footer>选座购票</footer>
</template>

<script>
import { getList } from '@/apis/shouye'
import { showToast, ImagePreview } from 'vant'

export default {
    name: 'FilmDetail',
    data() {
        return {
            cartlist: [],
            activeName: 1,
            oldlist: []
        }
    },
    created() {
        const id = this.$route.params.id || this.$route.query.id
        getList({ type: 2, cartid: id })
            .then(res => {
                console.log(res.data.data.list);

                const list = res.data.data.list || []
                const found = list.find(
                    item =>
                        String(item.id) === String(id) ||
                        String(item.cartid) === String(id)
                )
                this.cartlist = found ? [found] : list.length === 1 ? list : []
            })
            .catch(() => showToast('加载失败'))
        getList({ type: 1, cartid: id }).then(res => {
            console.log(res.data.data.list);
            this.oldlist = res.data.data.list || []
        })

    },
    methods: {
        parseActors(str) {
            if (!str) return [];
            try {
                return JSON.parse(str);
            } catch {
                return [];
            }
        },
        /* 解析剧照数组 */
        parsePhotos(str) {
            if (!str) return []
            try {
                return JSON.parse(str)
            } catch {
                return []
            }
        },

        /* 点击打开预览 */
        showPhotoPreview(startIndex) {
            const images = this.parsePhotos(this.cartlist[0].photos)
            ImagePreview({
                images,
                startPosition: startIndex,
                closeable: true
            })
        }
    }
}
</script>

<style lang="less" scoped>
.image {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.list-content {
    padding: 10px;
}

.title-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.film-name {
    font-size: 16px;
    font-weight: bold;
}

.list-com {
    margin-top: 8px;
    line-height: 1.6;
}

/* 折叠面板顶部留一点空隙 */
.van-collapse {
    margin-top: -20px;
}

::v-deep .van-card {
    height: auto;
    /* 允许内容撑开 */
    padding-bottom: 12px;
}

.person {
    margin: 10px;
    font-size: 18px;
    font-weight: bold;

    .grid-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        /* 关键：不让 grid 换行 */
    }

    .person-grid {
        display: inline-grid;
        /* 横向排列关键 */
        grid-auto-flow: column;
        /* 只往右延伸，不换行 */
        grid-auto-columns: minmax(100px, 100px);
        /* 固定 60px，不挤压 */
        gap: 8px;
        /* 对应 gutter="8" */
    }

    /* 隐藏滚动条 */
    .grid-wrapper::-webkit-scrollbar {
        display: none;
    }
}

.lunbo {
    margin: 10px;
    font-size: 18px;
    font-weight: bold;
    /* ① 固定高度，防止顶高外部 */
    height: 88px;
}

.photo-list {
    /* ② 独立滚动层 */
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
}

.photo-list::-webkit-scrollbar {
    display: none;
}

/* ③ 强制 150×60 矩形，无圆角 */
::v-deep .photo-list .van-image {
    flex: 0 0 150px;
    height: 60px;
    border-radius: 0;
}

footer {
    height: 44px;
    background-color: orange;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
</style>